<template>
  <div class="cell-form-picker" @click="onClick">
    <div class="content" :class="{ 'placeholder': !value }">{{ value || placeholder }}</div>
    <image
      class="icon"
      mode="aspectFit"
      src="../../static/images_qccx/right.png"
    />
  </div>
</template>

<script>
export default {
  name: "cell-form",
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    required: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    onClick() {
      this.$emit('onClick')
    }
  }
};
</script>

<style lang="scss" scoped>
  .cell-form-picker {
    display: flex;
    .content {
      font-size: 28rpx;
      color: #1A1A1AFF;
      line-height: 44rpx;
      flex: 1;
    }
    .placeholder {
      color: #C9CDD4;
    }
    .icon {
      flex-shrink: 0;
      width: 48rpx;
      height: 48rpx;
    }
  }
</style>
